import * as THREE from 'three';
// 导入 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as dat from 'dat.gui'

/**
 *  目标：点光源
 */



// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 0, 10)
scene.add(camera);

// 添加物体
// 添加球体
const geometry = new THREE.SphereGeometry(1, 16, 16);

// 创建材质
const material = new THREE.MeshStandardMaterial();

// 创建球体网格
const sphere = new THREE.Mesh(geometry, material);


// 创造阴影
sphere.castShadow = true

// 将球体添加到场景中
scene.add(sphere);

//添加平面
const planeGeometry = new THREE.PlaneGeometry(30, 30);
// 创建材质
const planeMaterial = new THREE.MeshStandardMaterial({ side:THREE.DoubleSide });

// 创建球体网格
const plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.position.set(0, -2, 0);
// 旋转平台 到底部
plane.rotation.x = -Math.PI/2
// 接受阴影
plane.receiveShadow  = true
scene.add(plane);


// 添加环境光
scene.add(new THREE.AmbientLight(0xffffff, 1));

// 添加一个小球 作为点光源的载体

const lightBall = new THREE.Mesh(new THREE.SphereGeometry(.2,20,20), new THREE.MeshStandardMaterial({color:0xff0000, opacity:1}));

lightBall.position.set(2, 2, 2);

// 添加方向光
const pointLight = new THREE.PointLight(0xff0000,.5);
// pointLight.position.set(2, 2, 2);
pointLight.castShadow = true;
pointLight.intensity = 10

// 设置阴影属性
// 模糊度
pointLight.shadow.radius = 20





// scene.add(pointLight);
lightBall.add(pointLight)
scene.add(lightBall)

const gui = new dat.GUI();
gui.add(pointLight, 'intensity', 0, 20).name('光照强度');
gui.add(pointLight,'distance',0, 20).name('光源距离');
gui.add(pointLight,'decay',0, 2).step(0.01).name('光照距离的衰退量');

// gui.add(pointLight.position, 'x', -5, 5).name('光源位置x');
// gui.add(pointLight.position, 'y', -5, 5).name('光源位置y');
// gui.add(pointLight.position, 'z', -5, 5).name('光源位置z');

// 点光源辅助器
// const sphereSize = 1
// const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
// scene.add( pointLightHelper );


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

//开启阴影
renderer.shadowMap.enabled = true;

// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
// renderer.render(scene,camera)

// 创建轨道控制器 (相机,用于渲染的dom)
const controls = new OrbitControls(camera, renderer.domElement);
// 开启阻尼
controls.enableDamping = true;

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(3);
scene.add( axesHelper );

// 设置 clock
const clock = new THREE.Clock();


/**
 * 渲染函数
 * L = V*T   距离 = 速度 * 时间
 */
function render() {
    // 添加随着大球运动的动画
    let time = clock.getElapsedTime();
    lightBall.position.x = Math.sin(time) * 3;
    lightBall.position.z = Math.cos(time) * 3;
    controls.update()
    renderer.render(scene, camera)
    // 浏览器自带的 请求动画帧的方法 ，这里设置 没一帧都吊用一下 render 函数
    requestAnimationFrame(render)
}
render();

// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 重新设置相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新设置相机的裁剪面(投影矩阵)
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
}